<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3911564_diiqwk5gg38.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/department.css">
</head>

<body>
    <div class="department">
  
        <div class="content">
            <div class="departmentHeader">
                <div class="depTitle"><span>&nbsp;</span>部门管理</div>
                <div class="depTitleBtn">
                    <button><span class="iconfont icon-daoru"></span>导入</button>
                    <button><span class="iconfont icon-export"></span>导出</button>
                    <button><span class="iconfont icon-shuaxin"></span>刷新</button>
                </div>
            </div>
            <div class="departmentBody">
                <div class="dbsSel">
                    <div class="dbsSelTitle"><span class="iconfont icon-sousuoxiao"></span><span>筛选查询</span></div>
                    <div class="dbsSelSearch">
                        <span>部门编号：<input type="text" name="" id="depIdInput"></span>
                        <span>部门名称：<input type="text" name="" id="depNameInput"></span>
                        <span>负责人：<input type="text" name="" id="depPersonInput"></span>
                        <button id="selBtn">查询</button>
                        <button id="resetBtn">重置</button>
                    </div>
                </div>
                <div class="dataList">
                    <!-- 数据表格header -->
                    <div class="dataListTitle">
                        <div><span class="iconfont icon-liebiao"></span>数据列表</div>
                        <div><button data-target="#myAddModal" data-toggle="modal" id="addBtn"
                                class="newAdd">新增</button></div>
                    </div>
                    <!-- 数据表格 -->
                    <div>
                        <table class="table table-bordered" id="table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>部门编码</th>
                                    <th>部门名称</th>
                                    <th>负责人</th>
                                    <th>上级部门</th>
                                    <th>备注</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="depTable">

                            </tbody>
                        </table>
                    </div>
                    <!-- 页码 -->
                </div>
                <div class="pageNum">
                    <ul class="pagination">

                    </ul>
                </div>
            </div>
        </div>
        <!-- <button class="initBtn">init</button> -->
        <!-- addModal -->
        <div class="modal fade" id="myAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增</h4>
                    </div>
                    <div class="modal-body">
                        <table id="modalTable">
                            <tr>
                                <td>
                                    <span>部门编号</span><br>
                                    <input type="text" id="idCard">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>部门名称</span><br>
                                    <input type="text" name="" id="name">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>负责人</span><br>
                                    <input type="text" name="" id="person_liable">
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <span>上级部门</span><br>
                                    <input type="text" name="" id="superior_department">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>备注</span><br>
                                    <input type="text" name="" id="remarks">
                                </td>
                            </tr>
                        </table>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success" id="saveAddBtn">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- editModal -->
        <div class="modal fade" id="myEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">编辑</h4>
                    </div>
                    <div class="modal-body">
                        <table id="modalTable">
                            <tr>
                                <td>
                                    <span>部门编号</span><br>
                                    <input type="text" id="idCard" disabled placeholder="不可修改">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>部门名称</span><br>
                                    <input type="text" name="" id="editname">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>负责人</span><br>
                                    <input type="text" name="" id="editperson_liable">
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <span>上级部门</span><br>
                                    <input type="text" name="" id="editsuperior_department">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>备注</span><br>
                                    <input type="text" name="" id="editremarks">
                                </td>
                            </tr>
                        </table>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-success" id="saveEditBtn">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="myDelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">确定删除吗？</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-danger" id="saveDelBtn">删除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="../js/jquery-3.6.3.js"></script>
        <script src="../js/bootstrap.js"></script>
        <script src="../js/database.js"></script>
        <script src="../js/departmentManage.js"></script>
        <!-- <script>
             $(".departmentMenu ul li a").click(function(e){
                e.preventDefault();
                let url=$(e.target).attr("href");
                $(".content").load(url);
            })
        </script> -->
</body>

</html>